import React from "react";
import { NavBar, Space, Toast } from "antd-mobile";
import { SearchOutline, MoreOutline, CloseOutline } from "antd-mobile-icons";
import "./collection.scss";
import "../../assest/style/common.css";

export default () => {
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <SearchOutline />
        <MoreOutline />
      </Space>
    </div>
  );
  const back = () =>
    Toast.show({
      content: "点击了返回区域",
      duration: 1000,
    });

  return (
    <div className="app my-collection">
      <NavBar back="返回" onBack={back} className="top">
        我的收藏
      </NavBar>

      <main>
        <div className="flex aic detail-box bg-fff pl-10 pr-10">
          <img
            src="https://ts3.cn.mm.bing.net/th?id=ORMS.9551274a9615dbc6279df37ad4e05885&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0"
            alt=""
          />
          <div className=" w100p h100p pl-10 ">
            <span className="f14 detail  ">山溪-世纪10房16床豪华别墅</span>
            <span className="total">
              <span className="flex f14 pt-15">
                价格: &yen; <p className="price pl-5 pr-5">2688</p> 起
              </span>
              <span className="flex f14 pt-10">
                人均: &yen;<p className="price pl-5 pr-5">141</p> 起
              </span>
            </span>
          </div>
        </div>
        {/* 第二个 */}
        <div className="flex aic detail-box bg-fff pl-10 pr-10">
          <img
            src="https://ts3.cn.mm.bing.net/th?id=ORMS.9551274a9615dbc6279df37ad4e05885&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0"
            alt=""
          />
          <div className=" w100p h100p pl-10 ">
            <span className="f14 detail  ">山溪-世纪10房16床豪华别墅</span>
            <span className="total">
              <span className="flex f14 pt-15">
                价格: &yen; <p className="price pl-5 pr-5">2688</p> 起
              </span>
              <span className="flex f14 pt-10">
                人均: &yen;<p className="price pl-5 pr-5">141</p> 起
              </span>
            </span>
          </div>
        </div>
      </main>

      <div className="no-more pt-20">没有更多了 </div>
    </div>
  );
};
